<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body {background: #45dfff;}
	#c1,span {background: #fff;}
	</style>
	<script type="text/javascript">
	window.onload = function () {
		/*
			fillRect(L,T,W,H)
			strokeRect(L,T,W,H)
			rect(L,T,W,H)
		*/

		var oC = document.getElementById('c1');
		var oGC = oC.getContext('2d');
		//绘制方块：方法1
		oGC.fillRect(0, 102, 100, 100);	 			//填充。默认背景颜色黑色的方块
		oGC.strokeRect(0.5, 0.5, 99, 99); 		//画线。带有1px黑色边框的方块(如果L和H的是整数的话,边框会变成2px)

		//方法2
		oGC.beginPath();
		oGC.rect(200.5,200.5,50,50);
		oGC.stroke();								//绘制边框
		// oGC.fill();								//填充
	}
	</script>
</head>
<body>
	<div style="width:100px; height:100px; background:red"></div>
	<canvas id="c1" width="600" height="400"> <!-- 宽高在这里设置 -->
		<span>不支持canvas的浏览器</span>
	</canvas>
</body>
</html>